<template>
  <div>
    <el-drawer @close="closeFn" :visible="visible" direction="rtl">
      <el-form
        :rules="editFormFules"
        ref="editForm"
        label-width="100px"
        :model="deTailFordlist"
      >
        <el-form-item prop="name" label="名称">
          <el-input style="width: 200px" v-model="deTailFordlist.name">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="尺寸">
          <span></span>
        </el-form-item> -->
        <el-form-item label="文件大小">
          <span>{{ deTailFordlist.size }} Mb</span>
        </el-form-item>
        <el-form-item label="文件类型">
          <span>{{ deTailFordlist.createdTime }}</span>
        </el-form-item>
        <el-form-item label="视频分类">
          <span>{{ deTailFordlist.format }}</span>
        </el-form-item>
        <el-form-item label="添加日期">
          <span>{{ deTailFordlist.createdTime }}</span>
        </el-form-item>
        <el-form-item label="链接内容">
          <span
            ><a :href="deTailFordlist.url">{{ deTailFordlist.name }}</a></span
          >
        </el-form-item>
        <el-form-item>
          <div>
            <el-button
              @click="outputFn"
              class="button"
              type="primary"
              icon="el-icon-share"
              >导出文件</el-button
            >
            <el-button
              v-hasPermi="['work:video:remove']"
              @click="deleteFn"
              class="button"
              type="danger"
              icon="el-icon-delete"
              >删除文件</el-button
            >
          </div>

          <div></div>
          <div></div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getVideoListGetInfoAPi } from "@/wss/api/ContentSupervision/videoManagement.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      // 显示drawer

      deTailFordlist: {},
      // 规则
      editFormFules: {
        name: [{ required: true, message: "不可以为空哦", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 导出文件夹
    outputFn() {
      let herf = this.deTailFordlist.url;
      console.log(herf);
      //  差一步把url转换成 file类型的方法
      function getFileAndDownload(fileName, url) {
        var x = new XMLHttpRequest();
        x.open("GET", url, true);
        console.log(x);
        // x.response.setHeader("Access-Control-Allow-Origin", "*");
        x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        x.onload = function (e) {
          response.setCharacterEncoding("UTF-8");
          // response.setContentType("text/html;charset=UTF-8");

          // * 表示允许任何域名跨域访问
          response.setHeader("Access-Control-Allow-Origin", "*");
          var blob = x.response;

          if ("msSaveOrOpenBlob" in navigator) {
            //IE导出
            window.navigator.msSaveOrOpenBlob(blob, fileName);
          } else {
            var a = document.createElement("a");
            a.download = fileName;
            a.href = URL.createObjectURL(blob);
            document.body.append(a);
            a.click();
            document.body.remove(a);
          }
        };
        x.send();
      }
      getFileAndDownload("ceshi.mp4", herf);
    },
    closeFn() {
      this.$emit("update:visible", false);
    },
    // 保存
    async saveFn() {
      try {
        await this.$refs.editForm.validate();
        this.$emit("EventSave", this.deTailFordlist);
      } catch (error) {
        this.$modal.msgWarning("不可以为空哦");
      }
    },

    // 获取文件夹详细
    async getForderDetailFn(row) {
      let { data, code } = await getVideoListGetInfoAPi({ id: row.idStr });
      console.log(data);
      if (code == 200) {
        // data.size = data.size / 8 / 1024 / 1024;
        // data.size;
        this.deTailFordlist = JSON.parse(JSON.stringify(data));
        this.deTailFordlist.size = this.deTailFordlist.size / 8 / 1024 / 1024;
        this.deTailFordlist.url =
          this.deTailFordlist.url +
          this.deTailFordlist.path +
          "/" +
          this.deTailFordlist.filename;
      }
    },
    // 删除
    async deleteFn() {
      try {
        await this.$modal.confirm("确定要删除吗");
        // 返回删除的id
        this.$emit("EventDelete", { id: this.deTailFordlist.idStr });
      } catch (error) {
        this.$modal.msg(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.button {
  width: 300px;
  margin: 10px;
}
</style>